<template>
  <!-- vue3页面 -->
  <div class="screen" :style="{ background: store.autoTheme.bgColor }">
    <!-- 头部区域 -->
    <div class="head">
      <p class="title" :style="{ color: store.autoTheme.titleColor }">
        农业数据实时监控系统
      </p>
      <img src="/static/img/top02.png" class="logo" />
      <img
        class="switchThem"
        :src="store.autoTheme.img"
        @click="changeThemes"
      />
    </div>
    <!-- 图表区域 -->
    <div class="container">
      <div class="left">
        <!-- 横向柱状图 crosswise  fullscreen -->
        <div :class="screenStatus.crosswise ? 'fullscreen' : 'crosswise'">
          <crosswiseComp ref="crosswise"></crosswiseComp>
          <div class="resize" @click="changeScreen('crosswise',0)">
            <!-- icon-expand-alt  icon-compress-alt-->
            <span
              :class="[
                'iconfont',
                screenStatus.crosswise
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <!-- 纵向柱状图 -->
        <div :class="screenStatus.vertical ? 'fullscreen' : 'vertical'">
          <verticalComp ref="vertical"></verticalComp>
          <div class="resize" @click="changeScreen('vertical',1)">
            <span
              :class="[
                'iconfont',
                screenStatus.vertical ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </div>
      <div class="center">
        <!-- 环状图 -->
        <div :class="screenStatus.annular ? 'fullscreen' : 'annular'">
          <huanComp ref="annular"></huanComp>
          <div class="resize" @click="changeScreen('annular',2)">
            <span
              :class="[
                'iconfont',
                screenStatus.annular ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <!-- 地图 -->
        <div :class="screenStatus.map ? 'fullscreen' : 'map'">
          <mapComp ref="map"></mapComp>
          <div class="resize" @click="changeScreen('map',3)">
            <span
              :class="[
                'iconfont',
                screenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 折线图 -->
        <div :class="screenStatus.broken ? 'fullscreen' : 'broken'">
          <brokenComp ref="broken"></brokenComp>
          <div class="resize" @click="changeScreen('broken',4)">
            <span
              :class="[
                'iconfont',
                screenStatus.broken ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <!-- 饼图 -->
        <div :class="screenStatus.pie ? 'fullscreen' : 'pie'">
          <pieComp ref="pie"></pieComp>
          <div class="resize" @click="changeScreen('pie',5)">
            <span
              :class="[
                'iconfont',
                screenStatus.pie ? 'icon-compress-alt' : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 1.引入6个图表组件
import crosswiseComp from "@/components/crosswise.vue";
import verticalComp from "@/components/vertical.vue";
import pieComp from "@/components/pie.vue";
import huanComp from "@/components/huan.vue";
import brokenComp from "@/components/broken.vue";
import mapComp from "@/components/map.vue";
import { ref, reactive, nextTick } from "vue";
import themeStore from "../store/index.js";
const store = themeStore();
let crosswise = ref(null);
let vertical = ref(null);
let annular = ref(null);
let map = ref(null);
let broken = ref(null);
let pie = ref(null);


// 初始化6个图表组件的样式状态
let screenStatus = reactive({
  crosswise: false, //false是小屏幕  true:是大屏幕
  vertical: false,
  annular: false,
  map: false,
  broken: false,
   pie: false,
});



// 切换窗口
let arr=[crosswise,vertical,annular,map,broken,pie]
const  changeScreen=((type,i)=>{
    screenStatus[type] = !screenStatus[type];
  // 触发每个图表组件中的适配方法  父组件操作子组件中的方法（组件实例==>ref）
  // console.log(crosswise.value)
  // 问题：绘图快与div样式重置变化  重绘重排完毕后重新绘制
  nextTick(() => {
    arr[i].value .Adaptation()
  });
}) 
  // 修改图表样式状态
 


// 修改主题
function changeThemes() {
  store.changeThemeName();
}
</script>

<style scoped>
/*全屏样式的定义 */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
  background: red;
}

/* 大屏容器 */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* background-image: url("/static/img/bgc01.png"); */
}

/* 标题区域 */
.head {
  flex: 1;
  /* border: 2px solid blue; */
  margin-bottom: 0.1%;
  position: relative;
}

.head .title {
  text-align: center;
  color: #d96720;
  font-weight: bold;
  font-size: 25px;
  margin: 10px 0 0 0;
}

.head .logo {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}

.head .switchThem {
  position: absolute;
  right: 4%;
  bottom: 70%;
  color: orange;
  font-size: 14px;
  width: 18px;
}

/* 图标区域 */
.container {
  flex: 8;
  display: flex;
  justify-content: space-around;
}

/* 左侧视图区域 */
.container .left {
  /* flex: 3; */
  /* border: 1px solid red; */
  width: 28%;
  height: 100%;
  margin-left: 0.5%;
  display: flex;
  flex-direction: column;
}

.left .crosswise {
  flex: 3;
  /* border: 1px solid purple; */
  margin-bottom: 8%;
}

.left .vertical {
  flex: 2.5;
  /* border: 1px solid brown; */
}

/* 中间视图区域 */
.container .center {
  /* flex: 5; */
  /* border: 1px solid green; */
  width: 40%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}

.center .annular {
  flex: 1;
  /* border: 1px solid palegreen; */
  margin-bottom: 3%;
}

.center .map {
  flex: 4;
  width: 100%;
  /* border: 1px solid red; */
}

/* 右侧视图区域 */
.container .right {
  /* flex: 3; */
  /* border: 1px solid orange; */
  width: 28%;
  height: 100%;
  margin-right: 0.5%;
  display: flex;
  flex-direction: column;
}

.right .broken {
  flex: 1;
  /* border: 1px solid palevioletred; */
  margin-bottom: 6%;
}

.right .pie {
  flex: 1;
  /* border: 1px solid olive; */
}

.crosswise,
.vertical,
.annular,
.map,
.broken,
.pie {
  position: relative;
}

/* 缩放标记样式 */
.resize {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  color: white;
}
</style>